<template>
  <div class="remark-wrap">
    <div class="remark-box">
        <textarea class="remark" v-model="remark" placeholder="请输入点评内容（5-300字之间）" maxlength="300"
                  @blur="inputBlur"></textarea>
    </div>
    <div class="rate-box">
      <div class="rate-con">
        <div class="title">工作环境</div>
        <star :startType="1" class="star" @countScore="foodTotal"></star>
      </div>
      <div class="rate-con">
        <div class="title">餐饮环境</div>
        <star :startType="1" class="star" @countScore="manageTotal"></star>
      </div>
      <div class="rate-con">
        <div class="title">薪资福利</div>
        <star :startType="1" class="star" @countScore="moneyTotal"></star>
      </div>
      <div class="rate-con">
        <div class="title">企业管理</div>
        <star :startType="1" class="star" @countScore="sleepTotal"></star>
      </div>
      <div class="rate-con">
        <div class="title">住宿环境</div>
        <star :startType="1" class="star" @countScore="workTotal"></star>
      </div>
    </div>

    <multiple @uploadImg="uploadImg"></multiple>

    <div class="btn" @click="comment">确定</div>
  </div>
</template>

<script>
  import star from "../../components/star/start"
  import multiple from "../../components/star/multiple"
  import {baseUrl} from "../../common/js/env"
  import {getSessionStore} from "../../common/js/util"
  import {convertBase64ToBlob} from "../../common/js/util"
  import * as qiniu from 'qiniu-js'

  export default {
    data() {
      return {
        id: "",
        name: "",
        remark: "",
        foodScore: "",
        manageScore: "",
        moneyScore: "",
        sleepScore: "",
        workScore: "",
        userSign: "",
        picture: [],
        photoList: [],
        token: ""
      }
    },
    mounted() {
      this.id = this.$route.query.id;
      this.name = this.$route.query.name;
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(getSessionStore("user_sign"));
      this.getToken();
    },
    methods: {
      inputBlur() {
        window.scrollTo(0, 0);
      },
      foodTotal(score) {
        this.foodScore = score;
      },
      manageTotal(score) {
        this.manageScore = score;
      },
      moneyTotal(score) {
        this.moneyScore = score;
      },
      sleepTotal(score) {
        this.sleepScore = score;
      },
      workTotal(score) {
        this.workScore = score;
      },
      checkScore(score, type) {//校验评分
        if (score == "" || score == undefined) {
          if (type == 1) {
            this.$vux.toast.text("请您对工作环境进行打分", "middle");
          } else if (type == 2) {
            this.$vux.toast.text("请您对餐饮环境进行打分", "middle");
          } else if (type == 3) {
            this.$vux.toast.text("请您对薪资福利进行打分", "middle");
          } else if (type == 4) {
            this.$vux.toast.text("请您对企业管理进行打分", "middle");
          } else {
            this.$vux.toast.text("请您对住宿环境进行打分", "middle");
          }
          return;
        }
        return true;
      },
      checkRemark() {
        if (this.remark == null || this.remark == "" || this.remark == undefined) {
          this.$vux.toast.text("请输入点评内容", "middle");
          return;
        } else if (this.remark.length < 5) {
          this.$vux.toast.text("点评内容字数必须超过5字", "middle");
          return;
        }
        return true;
      },
      comment() {//写点评
        let food = this.foodScore;//饮食
        let manage = this.manageScore;//管理
        let money = this.moneyScore;//薪资
        let sleep = this.sleepScore;//住宿
        let work = this.workScore;//工作

        if (this.checkRemark() && this.checkScore(food, 1) && this.checkScore(manage, 2) && this.checkScore(money, 3) && this.checkScore(sleep, 4) && this.checkScore(work, 5)) {
          //企业点评
          this.$vux.loading.show({
            text: '加载中',
          });
          //上传七牛云
          if (this.photoList.length > 0) {
            for (let i = 0, length = this.photoList.length; i < length; i++) {
              let file = convertBase64ToBlob(this.photoList[i]); //Blob 对象，上传的文件
              let key = null; // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
              let config = {
                useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
                region: qiniu.region.z2 // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域};
              };
              let putExtra = {
                fname: "", //文件原文件名
                params: {}, //用来放置自定义变量
                mimeType: null //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
              };
              let observable = qiniu.upload(file, key, this.token, putExtra, config);
              observable.subscribe({
                next: (res) => {//主要用来展示进度
                  let total = res.total;
                },
                error: (err) => {//失败报错信息
                  this.$vux.loading.hide();
                  this.$vux.toast.text("图片上传失败，请重试", "middle");
                },
                complete: (res) => {//接收成功后返回的信息
                  this.picture.push("http://pic.lanpin123.com/" + res.hash);
                  if (this.photoList.length == this.picture.length) {//图片上传成功
                    this.rate();
                  }
                }
              });
            }
          } else {
            this.rate();
          }
        }
      },
      rate() {
        let pic = "";
        if (this.picture.length > 0) {
          pic = this.getText(this.picture);
        }

        let data = {
          "commentContent": this.remark,//评价内容
          "commentUrl": pic,//图片
          "foodEnvironScore": this.foodScore * 2,//饮食得分
          "manageEnvironScore": this.manageScore * 2,//管理
          "moneyEnvironScore": this.moneyScore * 2,//薪资
          "sleepEnvironScore": this.sleepScore * 2,//住宿
          "workEnvironScore": this.workScore * 2,//工作
          "mechanismId": this.id,//企业ID
        };
        this.axios.post(baseUrl + "/mechanismcomment/add_comment?sgin=" + this.userSign, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != 0) {
            this.$vux.toast.text("提交成功,等待系统审核", "middle");
            setTimeout(() => {
              this.$router.push({path: "/mechanism", query: {"id": this.id, "name": this.name}});
            }, 50);
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
            return;
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      uploadImg(obj) {//上传图片七牛云
        this.photoList = obj;
      },
      getToken() {//获取uploadToken
        this.axios.get(baseUrl + "/platform/get_token?sgin=" + this.userSign).then((res) => {
          let resultObj = res.data;
          this.token = resultObj.data;
        })
      },
      getText(arr) {
        let str = "";
        for (let i = 0; i < arr.length; i++) {
          str += arr[i] + ";";
        }
        if (str.length > 0) {
          str = str.substr(0, str.length - 1);
        }
        return str;
      }
    },
    components: {
      star,
      multiple
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .remark-wrap
    wh(100%, auto)
    padding-bottom: 0.48rem
    .remark-box
      display: flex
      justify-content: center
      margin: 0 auto
      margin-top: 0.267rem
      margin-bottom: 0.613rem
      wh(93.6%, 4.453rem)
      .remark
        padding-left: 0.213rem
        padding-top: 0.187rem
        wh(100%, 100%)
        size-color(0.373rem, rgba(51, 51, 51, 1))
        resize: none
        outline: none
        border: 0.027rem solid rgba(224, 224, 224, 1)
        border-radius: 0.08rem
    .rate-box
      margin: 0 auto
      margin-bottom: 0.613rem
      wh(93.6%, auto)
      .rate-con
        display: flex
        align-items: center
        wh(100%, 1rem)
        .title
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .star
          margin-left: auto
    .btn
      margin: 0 auto
      fj(center, center)
      wh(92.53%, 1.333rem)
      background: rgba(60, 175, 255, 1)
      border: 0.013rem solid rgba(238, 238, 238, 1)
      border-radius(0.133rem)
      size-color(0.48rem, rgba(254, 255, 255, 1))
</style>
